<template>
  <div class="distribution-approval-container">
    <!-- 顶部筛选卡片 -->
    <t-card class="filter-card">
      <div class="filter-tabs">
        <t-tabs :value="activeTab" @change="onTabChange">
          <t-tab-panel value="all" label="全部" />
          <t-tab-panel value="hunan" label="湖南省" />
          <t-tab-panel value="sichuan" label="四川省" />
        </t-tabs>
        <div class="search-area">
          <t-input placeholder="请输入你需要搜索的内容" clearable class="search-input" v-model="searchKeyword" @enter="onSearch">
            <template #suffix>
              <t-icon name="search" size="20px" @click="onSearch" />
            </template>
          </t-input>
        </div>
      </div>
    </t-card>

    <!-- 表格卡片 -->
    <t-card class="table-card">
      <div class="distribution-approval">
        <!-- 订单表格 -->
        <t-table row-key="id" :data="orderList" :columns="columns" :loading="loading" :hover="true"
          :pagination="pagination" @page-change="onPageChange">
          <template #checkbox="{ row }">
            <t-checkbox v-model="row.checked" />
          </template>

          <template #distributorName="{ row }">
            <span>{{ row.distributorName }}</span>
          </template>

          <template #applyTime="{ row }">
            <span>{{ row.applyTime }}</span>
          </template>

          <template #applyAmount="{ row }">
            <span>{{ row.applyAmount }}</span>
          </template>

          <template #status="{ row }">
            <t-tag :theme="getStatusTheme(row.status)" variant="light">
              {{ row.status }}
            </t-tag>
          </template>

          <template #proof="{ row }">
            <span class="proof-link" v-if="row.proof !== '提交中'">{{ row.proof }}</span>
            <span v-else>{{ row.proof }}</span>
          </template>

          <template #operation="{ row }">
            <t-button theme="primary" variant="text" @click="viewDetail(row)" class="detail-link">详情</t-button>
          </template>

          <!-- 空数据状态 -->
          <template #empty>
            <div class="empty-data">
              <t-icon name="file-excel" size="48px" />
              <p>暂无数据</p>
            </div>
          </template>
        </t-table>
      </div>
    </t-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { TabValue, PrimaryTableCol, TableRowData } from 'tdesign-vue-next';

// 扩展TableRowData接口创建OrderItem类型
interface OrderItem extends TableRowData {
  id: string;
  checked: boolean;
  distributorName: string;
  applyTime: string;
  applyAmount: string;
  status: string;
  proof: string;
}

const router = useRouter();
const loading = ref(false);
const searchKeyword = ref('');
const activeTab = ref<TabValue>('all');
const orderList = ref<OrderItem[]>([]);

// 表格列配置
const columns = ref<PrimaryTableCol[]>([
  { colKey: 'checkbox', type: 'multiple', width: 64, fixed: 'left' },
  { colKey: 'distributorName', title: '分销名称', width: 180 },
  { colKey: 'applyTime', title: '申请时间', width: 180, sorter: true },
  { colKey: 'applyAmount', title: '申请数量', width: 180, sorter: true },
  { colKey: 'status', title: '审核状态', width: 120 },
  { colKey: 'proof', title: '凭证', width: 120 },
  { colKey: 'operation', title: '操作', width: 120 }
]);

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 101,
  pageSizeOptions: [10],
  showJumper: true,
  showPageSize: true,
  showTotal: true,
  onChange(pageInfo: { current: number; pageSize: number }) {
    pagination.current = pageInfo.current;
    pagination.pageSize = pageInfo.pageSize;
    fetchOrderList();
  },
});

// 标签页切换
const onTabChange = (value: TabValue) => {
  activeTab.value = value;
  pagination.current = 1;
  fetchOrderList();
};

// 搜索事件
const onSearch = () => {
  pagination.current = 1;
  fetchOrderList();
};

// 获取订单列表数据
const fetchOrderList = () => {
  loading.value = true;

  setTimeout(() => {
    const mockData: OrderItem[] = [];

    // 模拟数据，与图片一致
    for (let i = 0; i < pagination.pageSize; i++) {
      // 根据选中的标签页筛选数据
      const isHunan = i % 3 === 0;
      const isSichuan = i % 3 === 1;

      if (activeTab.value === 'hunan' && !isHunan) continue;
      if (activeTab.value === 'sichuan' && !isSichuan) continue;

      // 生成状态和凭证
      let status, proof;
      if (i % 4 === 0) {
        status = '提交中';
        proof = '提交中';
      } else if (i % 4 === 1) {
        status = '待审核';
        proof = '查看凭证';
      } else if (i % 4 === 2) {
        status = '已拒绝';
        proof = '查看凭证';
      } else {
        status = '审核通过';
        proof = '查看凭证';
      }

      const distributor = isHunan ? '怀化市分销商小李' : (isSichuan ? '怀化市分销商小张' : '怀化市分销商小王');

      mockData.push({
        id: `${mockData.length + 1}`,
        checked: false,
        distributorName: distributor,
        applyTime: '2025/03/14 13:23',
        applyAmount: '19000.000KG',
        status,
        proof,
      });
    }

    // 根据搜索关键词筛选
    if (searchKeyword.value) {
      const keyword = searchKeyword.value.toLowerCase();
      const filteredData = mockData.filter(item =>
        item.distributorName.toLowerCase().includes(keyword) ||
        item.status.toLowerCase().includes(keyword)
      );
      orderList.value = filteredData;
      pagination.total = filteredData.length;
    } else {
      orderList.value = mockData;
      pagination.total = 101; // 总数保持101
    }

    loading.value = false;
  }, 300);
};

// 根据状态获取标签主题
const getStatusTheme = (status: string) => {
  switch (status) {
    case '提交中':
      return 'default';
    case '待审核':
      return 'warning';
    case '已拒绝':
      return 'danger';
    case '审核通过':
      return 'success';
    default:
      return 'default';
  }
};

// 页面变化
const onPageChange = (pageInfo: { current: number; pageSize?: number }) => {
  pagination.current = pageInfo.current;
  if (pageInfo.pageSize) {
    pagination.pageSize = pageInfo.pageSize;
  }
  fetchOrderList();
};

// 查看详情
const viewDetail = (row: OrderItem) => {
  router.push({
    path: `/distribution/approval/detail/${row.id}`,
    query: {
      status: row.status,
      distributorName: row.distributorName
    }
  });
};

onMounted(() => {
  fetchOrderList();
});
</script>

<style lang="less" scoped>
.distribution-approval-container {
  width: 100%;
  padding: 16px;
  background-color: #f5f5f5;

  .filter-card {
    margin-bottom: 16px;

    .filter-tabs {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .search-area {
        .search-input {
          width: 300px;
        }
      }
    }
  }

  .table-card {
    .distribution-approval {
      width: 100%;
    }
  }

  // 详情链接样式
  .detail-link {
    color: #0052d9;
    padding: 0;
    font-size: 14px;

    &:hover {
      color: #2a7af9;
    }
  }
}

// 凭证链接样式
.proof-link {
  color: #0052d9;
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}

// 空数据状态样式
.empty-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: #999;

  p {
    margin-top: 8px;
  }
}

:deep(.t-table) {
  border-radius: 3px;

  .t-head tr {
    background-color: #f9f9f9;
  }
}

:deep(.t-pagination) {
  padding: 16px 24px;
  background-color: white;
  border-top: 1px solid #e6e6e6;
}
</style>